import React, { useMemo, useState } from "react";

export default function UseMemo() {
  const [num, setnum] = useState(10);
  const [price, setprice] = useState(88);

  const [n, setn] = useState(1);

  let fn1  = function(){
    console.log("开始计算");
    return  num * price;
  }

 let total= useMemo(() =>{
    console.log("我也开始计算")
    return  num*price
 } , [num,price]);

  return (
    <div>
        <div>
            n为{n}
            <button onClick={()=>{
                setn(n+1);  
            }}>修改n</button>
        </div>
      UseMemo
      <div>
        数量{" "}
        <input
          value={num}
          onChange={(e) => {
            setnum(e.target.value);
          }}
        />{" "}
      </div>
      <div>
        价格{" "}
        <input
          value={price}
          onChange={(e) => {
            setprice(e.target.value);
          }}
        />{" "}
      </div>
      总价{price*num}
      <div>函数取总价 {fn1()}</div>
      <div>统计{total}</div>
    </div>
  );
}
